<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>简易计算器</h1>
    <input type="text" id="input" readonly><br>
    <button onclick="appendToInput('1')">1</button>
    <button onclick="appendToInput('2')">2</button>
    <button onclick="appendToInput('3')">3</button>
    <button onclick="appendToInput('+')">+</button><br>
    <button onclick="appendToInput('4')">4</button>
    <button onclick="appendToInput('5')">5</button>
    <button onclick="appendToInput('6')">6</button>
    <button onclick="appendToInput('-')">-</button><br>
    <button onclick="appendToInput('7')">7</button>
    <button onclick="appendToInput('8')">8</button>
    <button onclick="appendToInput('9')">9</button>
    <button onclick="appendToInput('*')">*</button><br>
    <button onclick="appendToInput('0')">0</button>
    <button onclick="appendToInput('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="clearInput()">清除</button><br>
    <script>
      function appendToInput(value) {
        var input = document.getElementById('input');
        input.value += value;
      }
      function calculate() {
        var input = document.getElementById('input');
        var result = eval(input.value);
        input.value = result;
      }
  
      function clearInput() {
        var input = document.getElementById('input');
        input.value = '';
      }
    </script>
</body>
</html>